<template>
  <MainLayout>
    <div class="user-list-container">
      <!-- 搜索和操作栏 -->
      <div class="search-action-bar">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户名或邮箱"
              prefix-icon="<Search />"
              class="search-input"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="roleFilter" placeholder="用户角色">
              <el-option label="全部" value="all" />
              <el-option label="管理员" value="admin" />
              <el-option label="普通用户" value="user" />
              <el-option label="访客" value="guest" />
            </el-select>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button type="primary" class="add-user-btn">
              <Plus /> 添加用户
            </el-button>
            <el-button type="default" class="ml-2">
              <Download /> 导出数据
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 用户表格 -->
      <el-card class="user-table-card">
        <el-table :data="filteredUsers" stripe class="user-table">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="username" label="用户名" width="140" />
          <el-table-column prop="email" label="邮箱" width="200" />
          <el-table-column prop="role" label="角色" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getRoleTagType(scope.row.role)">
                {{ scope.row.role === 'admin' ? '管理员' : scope.row.role === 'user' ? '普通用户' : '访客' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#10b981"
                inactive-color="#ef4444"
                :active-value="true"
                :inactive-value="false"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="180" align="center" />
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <el-button icon="<Edit />" size="small" @click="handleEdit(scope.row)" />
              <el-button icon="<Lock />" size="small" class="ml-2" @click="handleResetPassword(scope.row)" />
              <el-button icon="<Delete />" size="small" class="ml-2" type="danger" @click="handleDelete(scope.row)" />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredUsers.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>

      <!-- 空状态 -->
      <div v-if="filteredUsers.length === 0" class="empty-state">
        <el-empty description="没有找到用户数据"></el-empty>
      </div>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import MainLayout from '@/components/layout/MainLayout.vue';
import {
  Plus,
  Search,
  Download,
  Edit,
  Lock,
  Delete
} from '@element-plus/icons-vue';

// 定义用户类型
interface User {
  id: number;
  username: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
  status: boolean;
  createdAt: string;
}

// 模拟用户数据
const users = ref<User[]>([
  {
    id: 1,
    username: 'admin',
    email: 'admin@example.com',
    role: 'admin',
    status: true,
    createdAt: '2025-07-01'
  },
  {
    id: 2,
    username: 'user1',
    email: 'user1@example.com',
    role: 'user',
    status: true,
    createdAt: '2025-07-02'
  },
  {
    id: 3,
    username: 'user2',
    email: 'user2@example.com',
    role: 'user',
    status: false,
    createdAt: '2025-07-03'
  },
  {
    id: 4,
    username: 'guest1',
    email: 'guest1@example.com',
    role: 'guest',
    status: true,
    createdAt: '2025-07-04'
  },
  {
    id: 5,
    username: 'user3',
    email: 'user3@example.com',
    role: 'user',
    status: true,
    createdAt: '2025-07-05'
  },
  {
    id: 6,
    username: 'user4',
    email: 'user4@example.com',
    role: 'user',
    status: true,
    createdAt: '2025-07-06'
  },
  {
    id: 7,
    username: 'guest2',
    email: 'guest2@example.com',
    role: 'guest',
    status: false,
    createdAt: '2025-07-07'
  },
  {
    id: 8,
    username: 'user5',
    email: 'user5@example.com',
    role: 'user',
    status: true,
    createdAt: '2025-07-08'
  }
]);

// 搜索和筛选条件
const searchQuery = ref('');
const roleFilter = ref('all');

// 分页控制
const currentPage = ref(1);
const pageSize = ref(10);

// 筛选用户数据
const filteredUsers = computed(() => {
  return users.value.filter(user => {
    // 搜索筛选
    const matchesSearch = user.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                          user.email.toLowerCase().includes(searchQuery.value.toLowerCase());
    // 角色筛选
    const matchesRole = roleFilter.value === 'all' || user.role === roleFilter.value;
    return matchesSearch && matchesRole;
  });
});

// 根据角色获取标签类型
const getRoleTagType = (role: string): 'primary' | 'success' | 'info' => {
  switch (role) {
    case 'admin': return 'primary';
    case 'user': return 'success';
    case 'guest': return 'info';
    default: return 'info';
  }
};

// 处理用户状态变更
const handleStatusChange = (user: User) => {
  user.status = !user.status;
};

// 处理编辑用户
const handleEdit = (user: User) => {
  console.log('编辑用户:', user);
};

// 处理重置密码
const handleResetPassword = (user: User) => {
  console.log('重置密码:', user);
};

// 处理删除用户
const handleDelete = (user: User) => {
  users.value = users.value.filter(u => u.id !== user.id);
};

// 分页事件处理
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
};
</script>

<style scoped>
.user-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-action-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
}

.add-user-btn {
  display: flex;
  align-items: center;
}

.user-table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-table {
  flex: 1;
  width: 100%;
}

.pagination-container {
  padding: 15px 0;
  text-align: right;
}

.empty-state {
  margin-top: 50px;
  text-align: center;
}

.ml-2 {
  margin-left: 8px;
}
</style>